<template>
<div  class="app">
	<myNavbar title="我的推广订单" />
	<div class="order_list">
		<div class="coupon-none" v-if="orderData.length==0">
			<image class="coupon-none-image " src="http://cdn.rzico.com/v4.0/footprint-none.png"></image>
			<div class="coupon-none-text">暂无推广订单</div>
		</div>
		<list v-if="orderData.length>0">
			<cell v-for="item in orderData" class="order_list_item">
				<div class="order_list_header">
					<!-- <text class="order_list_header_title">{{item.itemList[0].name}}</text> -->
					<text class="order_list_header_status">{{item.statusDescr}}</text>
				</div>
				<div class="order_list_content" v-if="item.itemList.length ==1" v-for="item1 in item.itemList" >
					<div class="order_list_content_img mg-r20">
						<image  style="width:170px;height:170px" :src="item1.thumbnail"></image>
					</div>
					<div class="order_list_content_box">
						<div class="order_list_content_top">
							<text class="order_list_content_name">{{item1.name}}</text>
							<text class="order_list_content_price">¥{{item1.price}}</text>
						</div>
						<div class="order_list_content_bottom">
							<text class="order_list_content_subtitle">{{item1.spec}}</text>
							<text class="order_list_content_number">x {{item1.quantity}}</text>
						</div>
					</div>
				</div>
				<div class="order_list_content" v-if="item.itemList.length >1">
					<div class="order_list_content_img mg-r20" v-if="index==0 || index==1" v-for="item in orderData.itemList">
						<image  style="width:170px;height:170px" :src="item.thumbnail"></image>
					</div>
					<div class="order_list_content_more">
						<text class="order_item_more_number">共计{{item.subQuantity}}件</text>
						<text class="iconfont icon-arrow order_item_icon"></text>
					</div>
				</div>
				<div class="order_list_content_information">
					<text class="order_list_content_left">共计{{item.subQuantity}}件商品</text>
					<div class="">
						<text class="order_price_title">佣金：</text>
						<text class="order_price_icon">¥</text>
						<text class="order_price_number">{{item.rebate1}}</text>
					</div>
				</div>
			</cell>
		</list>
	
		
	</div>
</div>
</template>
<script>
	import myNavbar from '../../../../components/myNavbar/myNavbar.vue'
	import {orderList} from '../../../../api/order'
export default {
  name: '',
 data () {
    return {
		orderData:[
			
		]
	}
  }, 
  created () { // 在实例创建完成后被立即调用
  this.id=app.config.params
  this.loadOrder()
  },
  methods: {
	  loadOrder(){
		  orderList({
			  memberId:this.id
		  }).then(res=>{
			  this.orderData=res.data.data
		  })
	  },
  },
  components: {
	  myNavbar
  },
}
</script>

<style scoped>
	

	.app{
		flex: 1;
	  background-color: rgba(248, 248, 248, 1);
	}
	
	.order_list {
	  width: 750px;
	  padding-left: 25px;
	  padding-right: 25px;
	  box-sizing: border-box;
	}
	
	.order_list_item {
	  width: 700px;
	  /* height: 452px; */
	  background-color: rgba(255, 255, 255, 1);
	  border-radius: 16px;
	  margin-top: 20px;
	  padding: 25px;
	  box-sizing: border-box;
	}
	
	.order_list_header {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	  width: 650px;
	  height: 40px;
	}
	
	.order_list_header_title {
	  font-size: 24px;
	  font-weight: 500;
	  color: rgba(26, 26, 30, 1);
	  line-height: 36px;
	  width: 520px;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  overflow: hidden;
	}
	
	.order_list_header_status {
	  font-size: 24px;
	  font-weight: 400;
	  color: rgba(215, 38, 28, 1);
	}
	
	.order_list_content {
	  width: 650px;
	  display: flex;
	  flex-direction: row;
	  margin-top: 42px;
	  position: relative;
	}
	
	.order_list_content_img {
	  width: 170px;
	  height: 170px;
	  background-color: rgba(250, 250, 250, 1);
	  border-radius: 4px;
	  overflow: hidden;
	}
	
	.order_list_content_box {
	  display: flex;
	  flex-direction: column;
	}
	
	.order_list_content_top {
	  width: 460px;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 15px;
	}
	
	.order_list_content_name {
	  font-size: 28px;
	  font-weight: 400;
	  color: rgba(26, 26, 30, 1);
	  line-height: 42px;
	  white-space: nowrap;
	  lines:1;
	  width: 380px;
	  text-overflow: ellipsis;
	  overflow: hidden;
	}
	
	.order_list_content_price {
	  font-size: 18px;
	  font-weight: 400;
	  color: rgba(26, 26, 30, 1);
	  line-height: 36px;
	}
	
	.order_list_content_bottom {
	  width: 460px;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.order_list_content_subtitle {
	  font-size: 24px;
	  font-weight: 400;
	  color: rgba(26, 26, 30, 1);
	  line-height: 36px;
	  opacity: 0.5;
	  width: 380px;
	  text-overflow: -o-ellipsis-lastline;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  line-clamp: 2;
	  -webkit-box-orient: vertical;
	  lines:2;
	}
	
	.order_list_content_number {
	  font-size: 24px;
	  font-weight: 400;
	  color: rgba(26, 26, 30, 1);
	  line-height: 36px;
	  opacity: 0.5;
	}
	
	.order_list_content_information {
	  width: 650px;
	  height: 40px;
	  background: rgba(0, 0, 0, 0);
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  flex-direction: row;
	  margin-top: 40px;
	}
	
	.order_list_content_left {
	  font-size: 24px;
	  font-weight: 400;
	  color: rgba(26, 26, 30, 1);
	  line-height: 36px;
	  opacity: 0.5;
	}
	
	.order_price_title {
	  font-size: 24px;
	  font-weight: 400;
	  color: rgba(26, 26, 30, 1);
	  line-height: 36px;
	}
	
	.order_price_icon {
	  font-size: 20px;
	  font-weight: 400;
	  color: #eb594f;
	  line-height: 36px;
	}
	
	.order_price_number {
	  font-size: 24px;
	  font-weight: 400;
	  color: #eb594f;
	  line-height: 36px;
	}
	
	.order_list_botton {
	  width: 650px;
	  display: flex;
	  flex-direction: row;
	  justify-content: flex-end;
	  align-items: center;
	  margin-top: 40px;
	}
	
	.order_list_botton_gray {
	  width: 136px;
	  height: 48px;
	  border: 1px solid rgba(126, 128, 136, 0.8);
	  border-radius: 4px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin-left: 25px;
	}
	
	.order_list_botton_gray_title {
	  font-size: 24px;
	  font-weight: 400;
	  color: rgba(26, 26, 30, 0.5);
	}
	
	
	.order_list_botton_red {
	  width: 136px;
	  height: 48px;
	  /* background: linear-gradient(129deg, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1)); */
	  border-radius: 4px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  opacity: 0.8;
	}
	
	.order_list_botton_red_title {
	  font-size: 24px;
	  font-weight: 400;
	  /* color: white; */
	}
	
	.order_list_content_more{
	  display: flex;
	  flex-direction: row;
	  justify-content: flex-end;
	  align-items: center;
	  position: absolute;
	  right: 0;
	  height: 170px;
	}
	
	.order_item_icon{
	font-size: 36px;
	opacity:0.3;
	}
	
	.order_item_more_number{
	font-size:24px;
	font-weight:400;
	color:rgba(26,26,30,1);
	opacity:0.5;
	}
	
	.mg-l20 {
	  margin-left: 20px;
	}
	.mg-r20{
	  margin-right: 20px
	}
	
	.coupon-none{
	height: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	  width: 750px;
	}
	.coupon-none-image {
	  text-align: center;
	  /* display: block; */
	  margin: 0 auto;
	  width: 196px;
	  height:131px;
	}
	
	.coupon-none-text {
	  text-align: center;
	  letter-spacing: 5px;
	  font-size: 28px;
	  font-family: PingFang SC;
	  font-weight: 400;
	  color: rgba(26, 26, 30, 1);
	  line-height: 42px;
	  opacity: 0.3;
	  margin-top: 30px;
	}
</style>
